<template>
  <el-container class="home">
    <el-header>
      <div class="left">
        <img src="~assets/img/header.jpg" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="exit">退出</el-button>
    </el-header>
    <el-container>
      <el-aside :width="isExtend ? '64px' : '200px'">
        <div
          class="extend el-icon-arrow-left extendleft"
          @click="extending"
          v-if="!isExtend"
        ></div>
        <div
          class="extend el-icon-arrow-right extendright"
          @click="extending"
          v-else
        ></div>
        <el-menu
          background-color="#373D49"
          text-color="#fff"
          active-text-color="#3B99F3"
          :collapse="isExtend"
          :collapse-transition="false"
          router
          :default-active="$route.path"
        >
          <!--   属性router开启路由跳转以index为path -->
          <!--         一级菜单 -->
          <!--   index只识别字符串 -->
          <el-submenu
            :index="val.id + ''"
            v-for="(val, index) in menus"
            :key="val.id"
          >
            <!--      一级菜单模板区域 -->
            <template slot="title">
              <i :class="icons[index]"></i>

              <span>{{ val.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item
              @click="'/home/' + item.path"
              :index="'/home/' + item.path"
              v-for="item in val.children"
              :key="item.id"
            >
              <i class="el-icon-menu"></i>
              <span>{{ item.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
/* import { request } from "network/request.js"; */
export default {
  name: "",
  components: {},
  data() {
    return {
      menus: [],
      //被激活的路由地址
      activePath: "",
      isExtend: false,
      icons: [
        "iconfont icon-yonghuguanli",
        "iconfont icon-quanxianguanli4",
        "iconfont icon-checkbox-multiple-blank-fill",
        "iconfont icon-jilu",
        "iconfont icon-tongji3",
      ],
      itempath: "",
    };
  },
  methods: {
    //保存点击路由地址
    /*  savePath(path) {
      sessionStorage.setItem("activePath", path);
      this.activePath = path;
    }, */
    exit() {
      sessionStorage.removeItem("token");
      this.$router.replace("/login");
    },
    extending() {
      this.isExtend = !this.isExtend;
      //console.log(this.isExtend);
    },
    /*  savepath {
      console.log(path);
      this.itempath = path;
    }, */
  },
  created() {
    this.$request({
      url: "menus",
      method: "get",
    })
      .then((res) => {
        //console.log(res.data);
        if (res.data.meta.status !== 200) {
          return this.$message.error("请求失败");
        }
        this.menus = res.data.data;
      })
      .catch((err) => console.log(err));
  },
};
</script>
<style scoped>
.el-header {
  background-color: #3a4043;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  color: white;
  vertical-align: middle;
}
.left {
  display: flex;
  align-items: center;
}
.left img {
  display: block;
  width: 60px;
  height: 60px;
}
.left span {
  margin-left: 16px;
  font-size: 24px;
}
.el-aside {
  background-color: #363c48;
}
.el-main {
  background-color: #e4e8ec;
}
.home {
  height: 100%;
}
.iconfont {
  margin-right: 8px;
}
.el-menu {
  border: 0;
}
.extend {
  font-size: 28px;
  font-weight: 500;
  color: white;
}
.extendleft {
  position: relative;
  right: -160px;
}
.extendright {
  position: relative;
  right: -10px;
}
</style>
